"Bootstrap Carousel with Controls and Navbar"
Bootstrap 3.2.0 Snippet by The Nickel-Dime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" id="slideshow_page-wrapper">
<div class="row">
<div class="col-sm-12">
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div id="slideshow_carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner Slideshow">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
HTML, BODY {
overflow-x:hidden;
position:relative;
width: 100%;
height: 700px;
background-color:black;
}
#slideshow_page-wrapper {
position: relative;
padding:0;
width:100%;
height: 100%;
background-color:black;
}
.carousel-inner,
.carousel-inner .item {
height:100%;
width:100%;
}
.carousel-fade .carousel-inner > .item {
transition-property: opacity;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready( function() {
initProgressBar();
});
// CHANGE THIS WHEN YOU ADD MORE SLIDES
var TotalSlides = 10;
var ProgressBar= 0;
var CurrentSlide = 0;
// 0 == left 1 == right
var Direction = 1;
// BUILD THE PROGRESS BAR BASED ON NUMBER OF SLIDES IN CAROUSEL
function initProgressBar() {
var counter=0;
var head;
var middle;
var tail;
// for each slide in the carousel
$(".Slideshow").children("div").each( function() {
head = "<li class='Slideshow_progress-nugget";
if (counter === 0) {
head += " Slideshow-current";
}
middle = "' onclick='progressClick(";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: